<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta charset="utf-8" />
	<title></title>
	<link href="../css/bootstrap.min.css" rel="stylesheet">
	<link href="../css/bootstrap-select.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../css/bootstrap-treeview.min.css">
	<link href="../css/bootstrap-table.css" rel="stylesheet">
	<link href="../css/bootstrap-table-fixed-columns.css" rel="stylesheet">
	<link href="../css/font-awesome.min.css" rel="stylesheet">
	<link href="../css/JyyCommon.css" rel="stylesheet">
	<link href="../css/JyyTable.css" rel="stylesheet">
	<link href="../css/JyyTree.css" rel="stylesheet">
	<link href="../css/JyyMsgBox.css" rel="stylesheet">
	<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
	<script type="text/javascript" src="../js/jquery.form.min.js"></script> 
	<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-paginator.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-treeview.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-select.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-table.js"></script>
	<script type="text/javascript" src="../js/bootstrap-table-fixed-columns.js"></script>
	<script type="text/javascript" src="../js/jyy_modal.js"></script>
	<script type="text/javascript" src="../js/JyyCommon.js"></script>
	<script type="text/javascript" src="../js/JyyTable.js"></script>
	<script type="text/javascript" src="../js/JyyTree.js"></script>
	<script type="text/javascript" src="../js/JyyMsgBox.js"></script>
	<script type="text/javascript" src="../js/JyyLoading.js"></script>
	<script type="text/javascript" src="../js/echarts.js"></script>
	<script type="text/javascript" src="../../utils/CommonUtil.js"></script>
	<style>
	.heidenbt{
		display: none
	}
	thead tr:first-child {
		background-color: #4090E7;
        position:sticky;
        padding-top:10px;
        top: 0px;
    }
    #lineAttrTableDiv .fixed-table-border {
    	display: none;
    }
    #lineAttrTableDiv .bootstrap-table .fixed-table-container.fixed-height:not(.has-footer) {
    	border-bottom: none;
    }
    .bootstrap-select .dropdown-menu.inner{
			max-height: 220px;
		}
</style>
	<script type="text/javascript">
		var tree = null;
		var projectId =  getQueryString("projectId")||'88888888888';
		$(function(){
			getDatePicker();
			getAreaDatas();
		});
		function selectData(){
			var dateSel =  $('#dateSel').val(); 
			var lineNames =  $('#lineNames').val();
			if(JyyCommon.isEmpty(dateSel)){
				JyyMsgBox.alert({ title:"警告", message:"[日期]不可为空",type:"warning"}).on(function (e) {});
				return false;
			}
			if(lineNames.length == 0){
				JyyMsgBox.alert({ title:"警告", message:"[线路名称]不可为空",type:"warning"}).on(function (e) {});
				return false;
			}
			if(lineNames.length > 12){
				JyyMsgBox.alert({ title:"警告", message:"[线路名称]不可超过12个",type:"warning"}).on(function (e) {});
				return false;
			}
			JyyModelLoading.start("lineAttrTableDiv");
			$.when(getEcahtData(projectId, lineNames, "selectLineAttrTableData")).done(function(data){
				createTable(data.respData, 1);
				JyyModelLoading.end("lineAttrTableDiv");
			});
			JyyModelLoading.start("lineMeritEchartDiv");
			$.when(getEcahtData(dateSel, lineNames, "selectLineMeritEchatData1")).done(function(echatData){
				createEchat(echatData.respData, 1);
				JyyModelLoading.end("lineMeritEchartDiv");
			});
		}
		function selectData1(){
			var dateSel =  $('#dateSel1').val(); 
			var lineNames =  $('#lineNames1').val();
			if(JyyCommon.isEmpty(dateSel)){
				JyyMsgBox.alert({ title:"警告", message:"[日期]不可为空",type:"warning"}).on(function (e) {});
				return false;
			}
			if(lineNames.length == 0){
				JyyMsgBox.alert({ title:"警告", message:"[线路名称]不可为空",type:"warning"}).on(function (e) {});
				return false;
			}
			if(lineNames.length > 12){
				JyyMsgBox.alert({ title:"警告", message:"[线路名称]不可超过12个",type:"warning"}).on(function (e) {});
				return false;
			}
			JyyModelLoading.start("lineMonthEchartDiv");
			$.when(getEcahtData(dateSel, lineNames, "selectLineMonthEchatData1")).done(function(echatData){
				createEchat(echatData.respData, 2);
				JyyModelLoading.end("lineMonthEchartDiv");
			});
		}
		function selectData2(){
			var dateSel =  $('#dateSel2').val(); 
			var lineNames =  $('#lineNames2').val();
			if(JyyCommon.isEmpty(dateSel)){
				JyyMsgBox.alert({ title:"警告", message:"[日期]不可为空",type:"warning"}).on(function (e) {});
				return false;
			}
			if(lineNames.length == 0){
				JyyMsgBox.alert({ title:"警告", message:"[线路名称]不可为空",type:"warning"}).on(function (e) {});
				return false;
			}
			if(lineNames.length > 12){
				JyyMsgBox.alert({ title:"警告", message:"[线路名称]不可超过12个",type:"warning"}).on(function (e) {});
				return false;
			}
			JyyModelLoading.start("lineYearEchartDiv");
			$.when(getEcahtData(dateSel, lineNames, "selectLineYearEchatData1")).done(function(echatData){
				createEchat(echatData.respData, 3);
				JyyModelLoading.end("lineYearEchartDiv");
			});
		}
		function createTable(tableData, code) {
			var id = "";
			var table = {};
			if(code == 1) {
				id = "lineAttrTable";
				table = {
			    	cache: false,
			    	height: 210,
			        theadClasses: "bg-primary",
			    	columns: [{field:"linename", title:"线路名称",halign:"center",align:"center"},
			    			  {field:"areabegin", title:"起始节点",halign:"center",align:"center"},
			    			  {field:"areaend", title:"终止节点",halign:"center",align:"center"},
			    			  {field:"lineareaname", title:"所属区域",halign:"center",align:"center"}],
			    	data: tableData.data,
			    };
			}
			$('#'+id).bootstrapTable('destroy').bootstrapTable(table);
		}

		function createEchat(echartData, code) {
			var id = "";
			var option = {};
			var xAxisName = "";
			var yAxisName = "MW";
			var csvName = "echartData";
			if(code == 1) {
				id = "lineMeritEchart";
				xAxisName = "时刻";
				csvName = "线路有功潮流";
			} else if(code == 2) {
				id = "lineMonthEchart";
				xAxisName = "日";
				yAxisName = "MWh";
				csvName = "线路月输送电量";
			} else if(code == 3) {
				id = "lineYearEchart";
				xAxisName = "月份";
				yAxisName = "MWh";
				csvName = "线路年输送电量";
			}
			var xAxisData = echartData.xAxisData;
			var seriesData = [];
			for(var i = 0; i < echartData.seriesData.length;i++) {
				seriesData.push({
					name: echartData.seriesData[i].name,
					type: 'line',
				    data: echartData.seriesData[i].series
				});
			}
			option = {
			  	tooltip: {
			    	trigger: 'axis',
			    	axisPointer: {
			      		type: 'cross',
			      		label: {
			        		backgroundColor: '#6a7985'
			      		}
			    	},
			    	position: function(point, params, dom, rect, size) {
			             //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
			             var x = point[0]; //
			             var y = point[1];
			             var viewWidth = size.viewSize[0];
			             var viewHeight = size.viewSize[1];
			             var boxWidth = size.contentSize[0];
			             var boxHeight = size.contentSize[1];
			             var posX = 0; //x坐标位置
			             var posY = 0; //y坐标位置

			             if (x < boxWidth) { //左边放不开
			                 posX = 5;
			             } else { //左边放的下
			                 posX = x - boxWidth;
			             }

			             if (y < boxHeight) { //上边放不开
			                 posY = 5;
			             } else { //上边放得下
			                 posY = y - boxHeight;
			             }

			             return [posX, posY];
			         }
			  	},
				toolbox: {
					show: true,
					right: 30,
				    itemSize: 20,
					itemGap: 12,
			        feature: {
			        	myTool: {
			        		show: true,
			        		title: "导出为Excel",
			        		icon: 'image://../images/excel.png',
			        		onclick: (o) => {
								var option = o.option;
								var dataSource = [];
								var dataType = "\uFEFF"; //解决乱码问题
								dataType += option.xAxis[0].name+",";  //添加表格的头
								if(option.series.length > 0) {
									for(var i = 0;i < option.series.length;i++) {
										dataType += option.series[i].name+","
									}
									dataType = dataType.substr(0, dataType.length-1)
								}
								dataType += '\n'; // 以上是导出的Excel文件头部

								for(var i = 0;i < option.xAxis[0].data.length;i++) {
									var arr = [];
									for(var j = 0;j < option.series.length+1;j++) {
										if(j == 0) {
											arr.push(option.xAxis[0].data[i]);
										} else {
											arr.push(option.series[j-1].data[i]);
										}
									}
									dataSource.push(arr);
								}
								// 从dataSource中取出数据存入数据源（dataType）
								dataSource.map(item => dataType += `${item.join(',')}\n`); 
								// 使用Blob，获得二进制实例
								const csvData = new Blob([dataType], {
								    type: 'text/csv'
								});
								// 创建a标签
								const _a = document.createElement('a');
								_a.href = URL.createObjectURL(csvData);
								_a.target = '_blank';
								_a.download = csvName + `.csv`;
								document.body.appendChild(_a);
								_a.click();
								document.body.removeChild(_a);
		                   	},
			        	},
			        	saveAsImage: {name:csvName,icon:"image://../images/downpic.png"}
			        }
			    },
			    graphic: [{
                	type: 'group',
                    // rotation: Math.PI / 2,
                    bounding: 'raw',
                    right:200,
                    top: 20,
                    z: 100,
                    children: [{
                    	type: 'text',
                        left: 'center',
                        top: 'center',
                        z: 100,
                        style: {
                        	fill: '#000',
                            text: '日期：'+$("#dateSel"+(code==1?"":code-1)).val(),
                            font: 'normal 16px sans-serif'
                        }
                	}]
                }],
			  	grid: {
			    	left: '3%',
			    	right: '8%',
			    	bottom: '3%',
			    	containLabel: true
			  	},
			  	xAxis: [{
			    	type: 'category',
			    	name: xAxisName,
			      	data: xAxisData
			    }],
			  	yAxis: [{
			      	type: 'value',
			      	name: yAxisName
			    }],
				legend: {},
			  	series: seriesData
			};
			var chartDom = document.getElementById(id);
			var myChart = echarts.init(chartDom);
			myChart.clear();
			myChart.setOption(option);
			window.addEventListener("resize", () => {
				if(myChart){
					myChart.resize()
				}
			})
		}
		
		function getQueryString (name){
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			return r ? unescape(r[2]) : null;
		}

		function getDatePicker(){
			$.ajax({
				url: "Sample/selectLineAnalysisDate1",
				type:'POST',
				cache:false,
				dataType: "json",
				data:JSON.stringify({ projectId : projectId }),
				contentType:"application/json",
	            success:function(data){
	            	if(!data.respData.readOnly){
		    			$("#dateSel").datetimepicker({
		    				format : 'yyyy-mm-dd', // 展现格式
		    				autoclose : true, // 选择日期后关闭
		    				language : 'zh-CN', //显示语言为中文
		    				minView : "2",
		    				startDate : new Date(data.respData.startDate),
		    				endDate : new Date(data.respData.endDate)
		    			});
		    			$("#dateSel").datetimepicker("setDate", new Date(data.respData.startDate));
		            	selectData();
		    			$("#dateSel1").datetimepicker({
		    				format : 'yyyy-mm', // 展现格式
		    				autoclose : true, // 选择日期后关闭
		    				language : 'zh-CN', //显示语言为中文
	        				minView : "3",
	        				startView: "3",
		    				startDate : new Date(data.respData.startDate),
		    				endDate : new Date(data.respData.endDate)
		    			});
		    			$("#dateSel1").datetimepicker("setDate", new Date(data.respData.startDate));
		            	selectData1();
		    			$("#dateSel2").datetimepicker({
		    				format : 'yyyy', // 展现格式
		    				autoclose : true, // 选择日期后关闭
		    				language : 'zh-CN', //显示语言为中文
	        				minView : "4",
	        				startView: "4",
		    				startDate : new Date(data.respData.startDate),
		    				endDate : new Date(data.respData.endDate)
		    			});
		    			$("#dateSel2").datetimepicker("setDate", new Date(data.respData.startDate));
		            	selectData2();
	            	} else {
		    			$("#dateSel").datetimepicker({
		    				format : 'yyyy-mm-dd', // 展现格式
		    				autoclose : true, // 选择日期后关闭
		    				language : 'zh-CN', //显示语言为中文
		    				minView : "2",
		    				startDate : new Date(),
		    				endDate : new Date()-1000*60*60*24
		    			});
		    			$("#dateSel1").datetimepicker({
		    				format : 'yyyy-mm', // 展现格式
		    				autoclose : true, // 选择日期后关闭
		    				language : 'zh-CN', //显示语言为中文
	        				minView : "3",
	        				startView: "3",
		    				startDate : new Date(),
		    				endDate : new Date()-1000*60*60*24
		    			});
		    			$("#dateSel2").datetimepicker({
		    				format : 'yyyy', // 展现格式
		    				autoclose : true, // 选择日期后关闭
		    				language : 'zh-CN', //显示语言为中文
	        				minView : "4",
	        				startView: "4",
		    				startDate : new Date(),
		    				endDate : new Date()-1000*60*60*24
		    			});
						JyyMsgBox.alert({ title:"警告", message:"暂无相关数据",type:"warning"}).on(function (e) {});
	            	}
	            }
			});
		}

		function getAreaDatas() {
			$.ajax({
				url: "Sample/getLineAreas",
				type:'POST',
				async:false,
				dataType: "json",
				data:JSON.stringify({ projectId : projectId }),
				contentType:"application/json",
		        success:function(data){
					if(data.respData.linearea.length == 0){
						JyyMsgBox.alert({ title:"警告", message:"暂无数据",type:"warning"}).on(function (e) {});
						return false;
					}
					var content = '';
					$.each(data.respData.linearea,function(i,n){
						if(i == 0){
							content += "<option value='" + n.id + "' selected>"+ n.name +"</option>";
						} else {
							content += "<option value='" + n.id + "'>"+ n.name +"</option>";
						}
					});
					$("#lineAreas").html(content);
					$('#lineAreas').on('changed.bs.select',function () {
						getSelectDatas($('#lineAreas').val(), 0);
					});
					$('#lineAreas').selectpicker('refresh');
					getSelectDatas($('#lineAreas').val(), 0);
					
					$("#lineAreas1").html(content);
					$('#lineAreas1').on('changed.bs.select',function () {
						getSelectDatas($('#lineAreas1').val(), 1);
					});
					$('#lineAreas1').selectpicker('refresh');
					getSelectDatas($('#lineAreas1').val(), 1);

					$("#lineAreas2").html(content);
					$('#lineAreas2').on('changed.bs.select',function () {
						getSelectDatas($('#lineAreas2').val(), 2);
					});
					$('#lineAreas2').selectpicker('refresh');
					getSelectDatas($('#lineAreas2').val(), 2);
		        }
			});
		}
		function getSelectDatas(lineAreas, c){
			$.ajax({
				url: "Sample/getLineAnalysis1",
				type:'POST',
				async:false,
				dataType: "json",
				data:JSON.stringify({ projectId : projectId,lineAreas:lineAreas }),
				contentType:"application/json",
		        success:function(data){
					if(JyyCommon.isEmpty(data.respData.linename) || (data.respData.linename.length == 0)){
						return false;
					}
					var content = '';
					$.each(data.respData.linename,function(i,n){
						if(i == 0){
							content += "<option value='" + n + "' selected>"+ n+"</option>";
						} else {
							content += "<option value='" + n + "'>"+ n+"</option>";
						}
					});
					$("#lineNames"+(c==0?"":c)).html(content);
					$('#lineNames'+(c==0?"":c)).selectpicker('refresh');
		        }
			});
		}
		
		function getEcahtData(date, lineNames, method){
			var res = $.ajax({
				url: "Sample/"+method,
				type:'POST',
				cache:false,
				dataType: "json",
				data:JSON.stringify({ projectId : projectId, date : date,lineNames : lineNames }),
				contentType:"application/json",
	            success:function(data){
					return data;
	            }
			});
			return res;
		}

		function invoke(url, args, callback){
			var r, op = {
					url: '../g/service/Sample/' + url,
					type:'POST',
					cache:false,
					async:true,
					dataType:'json',
					data:args ? JSON.stringify(args) : null,
					contentType:"application/json"
				};
			if(typeof callback == 'function'){
				op.success = function(data){
					if(data.error)return alert(data.error);
					callback(data);
				}
			} else {
				op.async = false;
				op.success = function(data){
					r = data
				};
			}
			$.ajax(op);
			if(r)if(r.error){
				alert(r.error);
				return null;
			}
			return r;
		};
	</script>
<style type="text/css">
	body, html{
		width: 100%;
		height: 100%;
	}
	.selBtn {
		float:left;
		margin-left:20px;
		height:30px;
		width:70px;
		background-color:#1890FF;
		border-radius:5px;
		border: 0px;
		color:white;
	}
	.selBtn:hover {
		background-color: #00BFFF;
	}
	.shadow {
		box-shadow: 0 0.05rem 1rem rgba(0,0,0,0.15)!important;
		border-radius: 0.25rem!important;
		margin-left: 20px;
		margin-bottom: 20px;
	}
	.bootstrap-select:not(.input-group-btn), .bootstrap-select[class*="col-"] {
		float: left;
	}
</style>
</head>
<body>
<div style="overflow-y: auto;width: 100%;height: 100%;">
	<div style="height: 50px;width: calc(100% - 20px);">
		<div class="col-md-12" style="padding-left: 5px;padding-right: 5px;margin-top: 10px;margin-left: 20px;">
			<label  class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 40px;font-weight: normal;">日期</label>
            <input id="dateSel" class="form-control" placeholder="请选择日期" readonly style="float: left;margin-top: -3px;padding: 5px;width: 184px;font-weight: normal;">
			<label  class="control-label col-sm-1" style="float: left;margin-top: 7px;margin-left: 20px;padding: 0px;width: 60px;font-weight: normal;">线路区域</label>
			<select class="form-control selectpicker" multiple data-live-search="true" data-actions-box="true" data-selected-text-format="count > 4"
					id="lineAreas" title="请选择线路区域" data-none-results-text="未找到相关线路区域{0}" data-select-all-text="全选" data-deselect-all-text="取消全选"
					data-width="200px" data-size="10" data-count-selected-text="已选择{1}个线路区域中的{0}个"></select>
			<label  class="control-label col-sm-1" style="float: left;margin-top: 7px;margin-left: 20px;padding: 0px;width: 60px;font-weight: normal;">线路名称</label>
			<select class="form-control selectpicker" multiple data-live-search="true" data-actions-box="true" data-selected-text-format="count > 4"
					id="lineNames" title="请选择线路" data-none-results-text="未找到相关线路{0}" data-select-all-text="全选" data-deselect-all-text="取消全选"
					data-width="250px" data-size="10" data-count-selected-text="已选择{1}个线路中的{0}个"></select>

			<button class="selBtn" onclick=selectData()>查询</button>
		</div>
	</div>
	<div id="lineAttrTableDiv" class="shadow" style="width: calc(100% - 40px);height: 270px;position: relative;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">线路属性</span>
		</p>
		<table id="lineAttrTable" style="width: 80%;margin-left: 10%;overflow-y: scroll;"></table>
	</div>
	<div id="lineMeritEchartDiv" class="shadow" style="width: calc(100% - 40px);min-height: 450px;position: relative;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">线路有功潮流</span>
		</p>
		<div id="lineMeritEchart" style="width: 100%;height: 400px;margin-top: 25px;"></div>
	</div>
	<div style="height: 50px;width: calc(100% - 20px);">
		<div class="col-md-12" style="padding-left: 5px;padding-right: 5px;margin-top: 10px;margin-left: 20px;">
			<label  class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 40px;font-weight: normal;">日期</label>
            <input id="dateSel1" class="form-control" placeholder="请选择日期" readonly style="float: left;margin-top: -3px;padding: 5px;width: 184px;font-weight: normal;">
			<label  class="control-label col-sm-1" style="float: left;margin-top: 7px;margin-left: 20px;padding: 0px;width: 60px;font-weight: normal;">线路区域</label>
			<select class="form-control selectpicker" multiple data-live-search="true" data-actions-box="true" data-selected-text-format="count > 4"
					id="lineAreas1" title="请选择线路区域" data-none-results-text="未找到相关线路区域{0}" data-select-all-text="全选" data-deselect-all-text="取消全选"
					data-width="200px" data-size="10" data-count-selected-text="已选择{1}个线路区域中的{0}个"></select>
			<label  class="control-label col-sm-1" style="float: left;margin-top: 7px;margin-left: 20px;padding: 0px;width: 60px;font-weight: normal;">线路名称</label>
			<select class="form-control selectpicker" multiple data-live-search="true" data-actions-box="true" data-selected-text-format="count > 4"
					id="lineNames1" title="请选择线路" data-none-results-text="未找到相关线路{0}" data-select-all-text="全选" data-deselect-all-text="取消全选"
					data-width="250px" data-size="10" data-count-selected-text="已选择{1}个线路中的{0}个"></select>

			<button class="selBtn" onclick=selectData1()>查询</button>
		</div>
	</div>
	<div id="lineMonthEchartDiv" class="shadow" style="width: calc(100% - 40px);min-height: 450px;position: relative;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">线路月输送电量</span>
		</p>
		<div id="lineMonthEchart" style="width: 100%;height: 400px;margin-top: 25px;"></div>
	</div>
	<div style="height: 50px;width: calc(100% - 20px);">
		<div class="col-md-12" style="padding-left: 5px;padding-right: 5px;margin-top: 10px;margin-left: 20px;">
			<label  class="control-label col-sm-1" style="float: left;margin-top: 7px;padding: 0px;width: 40px;font-weight: normal;">日期</label>
            <input id="dateSel2" class="form-control" placeholder="请选择日期" readonly style="float: left;margin-top: -3px;padding: 5px;width: 184px;font-weight: normal;">
			<label  class="control-label col-sm-1" style="float: left;margin-top: 7px;margin-left: 20px;padding: 0px;width: 60px;font-weight: normal;">线路区域</label>
			<select class="form-control selectpicker" multiple data-live-search="true" data-actions-box="true" data-selected-text-format="count > 4"
					id="lineAreas2" title="请选择线路区域" data-none-results-text="未找到相关线路区域{0}" data-select-all-text="全选" data-deselect-all-text="取消全选"
					data-width="200px" data-size="10" data-count-selected-text="已选择{1}个线路区域中的{0}个"></select>
			<label  class="control-label col-sm-1" style="float: left;margin-top: 7px;margin-left: 20px;padding: 0px;width: 60px;font-weight: normal;">线路名称</label>
			<select class="form-control selectpicker" multiple data-live-search="true" data-actions-box="true" data-selected-text-format="count > 4"
					id="lineNames2" title="请选择线路" data-none-results-text="未找到相关线路{0}" data-select-all-text="全选" data-deselect-all-text="取消全选"
					data-width="250px" data-size="10" data-count-selected-text="已选择{1}个线路中的{0}个"></select>

			<button class="selBtn" onclick=selectData2()>查询</button>
		</div>
	</div>
	<div id="lineYearEchartDiv" class="shadow" style="width: calc(100% - 40px);min-height: 450px;position: relative;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">线路年输送电量</span>
		</p>
		<div id="lineYearEchart" style="width: 100%;height: 400px;margin-top: 25px;"></div>
	</div>
</div>
</body>
</html>